<template>
  <j-modal
    :title="title"
    :width="680"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @close="close"
    :destroyOnClose="true"
    cancelText="关闭"
    okText="保存"
  >
    <div style="margin: 0 auto">
      <a-form-model ref="form" :rules="validatorRules" :model="model" v-bind="layout" label-align="left">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="模型选择" prop="dataSourceType">
              <a-tree-select
                v-model="model.warnModelId"
                show-line
                allowClear
                style="width: 100%"
                placeholder="请选择"
                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                :tree-data="treeData"
                tree-default-expand-all
                @change="handleTreeSelect"
              >
              </a-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="状态" prop="dataSourceType">
              <j-dict-select-tag type="radioButton" v-model="model.status" dictCode="quartz_status" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :md="12" :sm="24">
            <a-form-model-item label="预警类型" prop="dataSourceType">
              <j-dict-select-tag v-model="model.warnType" dictCode="warn_type" />
            </a-form-model-item>
          </a-col> -->
          <a-col :md="12" :sm="24">
            <a-form-model-item
              label="预警方式"
              prop="dataSourceType"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 19 }"
            >
              <j-dict-select-tag
                :disabled="warnMethodDisabled"
                type="radio"
                v-model="model.warnMethod"
                dictCode="warn_style"
              />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="预警值" prop="dataSourceType">
              <a-input-number v-model.number="model.warnValue" :min="1" style="width:100%" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="提醒方式" prop="dataSourceType">
              <j-multi-select-tag v-model="model.remindMethod" dictCode="warn_alert_type" type="checkbox">
              </j-multi-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-model-item
              label="预警描述"
              prop="dataSourceType"
              :labelCol="{ span: 3 }"
              :wrapperCol="{ span: 21 }"
            >
              <a-textarea v-model="model.warnDesc" :auto-size="{ minRows: 2, maxRows: 4 }" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </j-modal>
</template>
<script>
import { httpAction, getAction, postAction } from '@/api/manage'

export default {
  name: 'SysPositionModal',
  components: {},
  data() {
    return {
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      treeData: [],
      model: {
        status: 0
      },
      warnMethodDisabled: false,
      url: {
        selectTree: '/dataModel/queryDataModelTemplate',
        test: '/dataSourceManage/testDataSourceById', // 连接测试
        add: '/warnConfig/add',
        edit: '/warnConfig/edit'
      },
      dataSource: [],
      validatorRules: {},
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      }

      // labelColRow: {
      //   xs: { span: 24 },
      //   sm: { span: 5 }
      // },
      // wrapperColRow: {
      //   xs: { span: 24 },
      //   sm: { span: 16 }
      // }
    }
  },
  created() {
    this.loadTree()
  },
  methods: {
    loadTree() {
      var that = this
      that.treeData = []
      getAction(this.url.selectTree).then(res => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.treeData = this.getTree(res.result, '0')
          this.loading = false
        }
      })
    },
    getTree(treeData, pid) {
      let treeArr = []
      for (let i = 0; i < treeData.length; i++) {
        let node = treeData[i]
        if (node.pid == pid) {
          let newNode = {
            title: node.modelName,
            key: node.id,
            value: node.id,
            execType: node.execType,
            children: this.getTree(treeData, node.id)
          }
          treeArr.push(newNode)
        }
      }
      return treeArr
    },
    handleTreeSelect(value, node, extra) {
      this.model.warnMethod = undefined
      this.warnMethodDisabled = false
      this.model.warnName = node[0]
      if (['0', '1'].includes(extra.triggerNode.dataRef.execType)) {
        this.warnMethodDisabled = true
        this.model.warnMethod = extra.triggerNode.dataRef.execType
      } else {
        this.warnMethodDisabled = false
        this.model.warnMethod = undefined
      }
    },
    close(isSubmit) {
      if (isSubmit) {
        this.saveData()
      } else {
        this.visible = false
      }
    },
    saveData() {
      let url = this.url.add,
        method = 'post'
      if (this.model.id) {
        url = this.url.edit
        method = 'put'
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          httpAction(url, this.model, method)
            .then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {})
        } else {
          return false
        }
      })
    },

    // TODO ------
    add() {
      this.dataSource = []
      this.model = this.$options.data().model
      this.visible = true
    },
    check(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.httpRequest()
      this.model = {}
    },
    edit(record) {
      this.model = Object.assign({}, record)
      if (['0', '1'].includes(this.model.execType)) {
        this.warnMethodDisabled = true
      } else {
        this.warnMethodDisabled = false
      }
      this.visible = true
      // this.httpRequest()
      // this.queryParam = {}
    }
  }
}
</script>

<style lang='less' scoped>
</style>
